{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import split, picto with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_title %}{{ ftl('page-title') }}{% endblock %}
{% block page_desc %}{{ ftl('page-description') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('protocol-emphasis-box') }}
  {{ css_bundle('quantum') }}
{% endblock %}

{% block content %}

{% call split(
    image=resp_img('img/firefox/browsers/quantum/browser-v2.jpg',
      srcset={ 'img/firefox/browsers/quantum/browser-high-res-v2.jpg': '2x' },
      optional_attributes={
        'class': 'mzp-c-split-media-asset',
        'width': '537',
        'height': '467'
      }
    ),
    media_after=True,
    media_class='mzp-l-split-h-center',
    block_class='mzp-l-split-hide-media-on-sm-md'
  ) %}
  <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>
  <h1 class="mzp-u-title-lg">{{ ftl('the-latest-firefox') }}</h1>
  <p>{{ ftl('firefox-quantum-was') }}</p>
  {{ download_firefox_thanks() }}
  <p><a class="mzp-c-cta-link" href="https://blog.mozilla.org/blog/2017/11/14/introducing-firefox-quantum/?utm_source=mozilla.org-firefox-browsers-quantum&utm_medium=referral&utm_campaign=seo-quantum&amp;utm_content=hero&amp;entrypoint=mozilla.org-firefox-browsers-quantum">{{ ftl('learn-more-about') }}</a></p>
{% endcall %}


<div class="mzp-l-content">
  <section class="quantum-highlights mzp-c-emphasis-box">
    <ul class="mzp-l-columns mzp-t-columns-three">
      {% call picto(
        title=ftl('privacy-first'),
        image=resp_img(
          url='img/firefox/new/desktop/privacy.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '64',
            'loading': 'lazy'
          }
        ),
        body=True,
      ) %}
        <p>{{ ftl('firefox-doesnt-spy') }}</p>
      {% endcall %}

      {% call picto(
        title=ftl('super-fast'),
        image=resp_img(
          url='img/icons/speedometer.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '64',
            'loading': 'lazy'
          }
        ),
        body=True,
      ) %}
        <p>{{ ftl('get-speed-and') }}</p>
      {% endcall %}

      {% call picto(
        title=ftl('always-evolving'),
        image=resp_img(
          url='img/firefox/new/desktop/highlights.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '64',
            'loading': 'lazy'
          }
        ),
        body=True,
      ) %}
        <p>{{ ftl('find-out-about', url=url('firefox.features.index')) }}</p>
      {% endcall %}
    </ul>
  </section>
</div>

{% endblock %}

{% block js %}{% endblock %}
